<template>
  <div class="allgoods">
    <div class="allgoods_main">
      <div class="goods_top">
        <div class="choosed">
          <div style="display:flex;align-items:center;">
            <span style="display: block;width: 90px;">已选条件:</span>
            <div class="tags_box">
              <el-tag size="small" v-for="tag in shopradio" :key="tag" closable @close="closetags(tag)">{{ tag }}
              </el-tag>
              <el-tag size="small" v-if="searchform.search !== ''" closable @close="closetags('search')">
                搜索:{{ searchform.search }}</el-tag>
              <el-tag size="small" v-if="searchform.brand_id !== ''" closable @close="closetags('brand')">
                品牌:{{ brandname }}</el-tag>
              <el-tag size="small" v-if="searchform.goods_class_id !== ''" closable @close="closetags('class')">
                分类:{{ classname }}</el-tag>
              <el-tag size="small" v-if="searchform.month_goods_num !== ''" closable @close="closetags('month_num')">
                月销量≥{{ searchform.month_goods_num }}笔</el-tag>
              <el-tag size="small" v-if="searchform.commission_bl !== ''" closable @close="closetags('commission_bl')">
                佣金比例≥{{ searchform.commission_bl }}%</el-tag>
              <el-tag size="small" v-if="searchform.commission !== ''" closable @close="closetags('commission')">
                佣金金额≥{{ searchform.commission }}</el-tag>
              <el-tag size="small" v-if="searchform.good_review_num !== ''" closable @close="closetags('review_num')">
                单品评分≥ {{ searchform.good_review_num }}</el-tag>
              <el-tag
                size="small"
                v-if="searchform.coupon_discount !== ''"
                closable
                @close="closetags('coupon_discount')">券面额≥ {{ searchform.coupon_discount }}</el-tag>
              <el-tag size="small" v-if="searchform.discount !== ''" closable @close="closetags('discount')">折扣≤
                {{ searchform.discount }}</el-tag>
              <el-tag
                size="small"
                v-if="
                  searchform.coupon_after_price_start !== '' &&
                    searchform.coupon_after_price_end !== ''
                "
                closable
                @close="closetags('after_price')">
                券后价: {{ searchform.coupon_after_price_start }}-{{
                  searchform.coupon_after_price_end
                }}
              </el-tag>
              <el-tag
                size="small"
                v-if="
                  searchform.goods_price_start !== '' &&
                    searchform.goods_price_end !== ''
                "
                closable
                @close="closetags('goods_price')">
                原价: {{ searchform.goods_price_start }}-{{
                  searchform.goods_price_end
                }}
              </el-tag>
              <el-tag size="small" v-if="searchform.sort !== ''" closable @close="closetags('sort')">排序条件:{{ sortname }}
              </el-tag>
              <el-tag size="small" v-if="searchform.desc !== ''" closable @close="closetags('desc')">
                顺序:
                <span v-if="searchform.desc == 1">降序</span>
                <span v-if="searchform.desc == 2">升序</span>
              </el-tag>
              <i class="el-icon-delete" @click="doclear"></i>
            </div>
          </div>
          <div>
            <el-button plain @click="searchshow = !searchshow" size="small">
              <span v-if="searchshow">
                收起筛选
                <i class="el-icon-arrow-up"></i>
              </span>
              <span v-else>
                展开筛选
                <i class="el-icon-arrow-down"></i>
              </span>
            </el-button>
          </div>
        </div>
        <el-card class="box-card" shadow="never" v-loading="searchloading">
          <!-- <div class="search_box" style="padding-bottom: 10px;">
            <div class="search_text">大牌</div>
            <div class="search_main">
              <div class="swiper_box" v-if="ishow">
                <div v-for="(brand, index) in imgsList" :key="index">
                  <div v-if="index < 1">
                    <div class="team_left">
                      <el-radio-group v-model="brandname" size="small">
                        <el-radio
                          :label="item.brand_name"
                          border
                          v-for="(item, index2) in brand"
                          :key="index2"
                          class="brand"
                          :style="{ marginRight: index < 1 ? '13px' : '9px' }">
                          <div v-if="index < 1 && index2 < 3" class="topthree">
                            <div class="left_box">
                              <img class="userimg img2" :src="item.logo" />
                              <div class="right_num">
                                <em>{{ item.goods_num }}</em>
                                <p>在线商品</p>
                              </div>
                            </div>
                            <div class="right_box" @click="changeBrand(item)">
                              <div class="right_info">
                                <div class="shade">{{ item.brand_name }}</div>
                                <div class="num_info">
                                  <div class="right_num">
                                    <em>{{ item.goods_today_num }}</em>
                                    <p>今日销量</p>
                                  </div>
                                  <div class="right_num">
                                    <em>{{ item.goods_all_num }}</em>
                                    <p>总销量</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div v-else class="topother">
                            <img class="userimg" :src="item.logo" />
                            <div class="shade">{{ item.brand_name }}</div>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="swiper_box" style="position:relative">
                <swiper ref="mySwiper" :options="swiperOptions">
                  <swiper-slide v-for="(brand, index) in imgsList" :key="index">
                    <div class="team_left">
                      <el-radio-group v-model="brandname" size="small">
                        <el-radio
                          :label="item.brand_name"
                          border
                          v-for="(item, index2) in brand"
                          :key="index2"
                          class="brand"
                          :style="{ marginRight: index < 1 ? '13px' : '11px' }">
                          <div @click="changeBrand(item)">
                            <div v-if="index < 1 && index2 < 3" class="topthree">
                              <div class="left_box">
                                <img class="userimg img2" :src="item.logo" />
                                <div class="right_num">
                                  <em>{{ item.goods_num }}</em>
                                  <p>在线商品</p>
                                </div>
                              </div>
                              <div class="right_box">
                                <div class="right_info">
                                  <div class="shade">{{ item.brand_name }}</div>
                                  <div class="num_info">
                                    <div class="right_num">
                                      <em>{{ item.goods_today_num }}</em>
                                      <p>今日销量</p>
                                    </div>
                                    <div class="right_num">
                                      <em>{{ item.goods_all_num }}</em>
                                      <p>总销量</p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-else class="topother">
                              <img class="userimg" :src="item.logo" />
                              <div class="shade">{{ item.brand_name }}</div>
                            </div>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </swiper-slide>
                </swiper>
              </div>
            </div>
            <div class="search_more">
              <p class="show" v-show="ishow" @click="ishow = false">
                查看更多
                <i class="el-icon-arrow-down"></i>
              </p>
              <div class="close" v-show="!ishow">
                <div style="padding:5px 0;cursor: pointer;" @click="ishow = true">
                  收起
                  <i class="el-icon-arrow-up"></i>
                </div>
                <div class="swiper_btn">
                  <div class="swiper-button-prevs">
                    <i class="el-icon-arrow-up"></i>
                  </div>
                  <div class="swiper-button-nexts">
                    <i class="el-icon-arrow-down"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider> -->
          <div class="search_box" style="padding:12px 0">
            <div class="search_text">分类</div>
            <div class="search_main">
              <div class="classradio">
                <el-radio-group v-model="classradio" @change="classchange">
                  <el-radio label="-1">
                    全部
                    <span v-if="classradio == -1">({{ count }})</span>
                  </el-radio>
                  <el-radio :label="item.id" v-for="(item, index) in classList" :key="index">
                    {{ item.class_name }}
                    <span v-if="item.id == classradio">({{ count }})</span>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
            <em></em>
          </div>
          <el-collapse-transition>
            <div v-show="searchshow">
              <el-divider></el-divider>
              <div class="search_box" style="padding:12px 0;">
                <div class="search_text">店铺</div>
                <div class="search_main">
                  <div class="shopcheckbox">
                    <el-checkbox-group v-model="shopradio" size="mini" @change="shopchange">
                      <el-checkbox label="自营店铺" border>自营店铺</el-checkbox>
                      <el-checkbox label="POP店铺" border>POP店铺</el-checkbox>
                      <el-checkbox label="第三方" border>第三方</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
                <em></em>
              </div>
              <el-divider></el-divider>
              <div class="search_box" style="padding:12px 0 0 0;">
                <div class="search_text" style="margin-top: 8px;">商品</div>
                <div class="search_main" style="width:1100px">
                  <div class="shopcheckbox">
                    <!-- <div style="padding:0px 0;display:flex">
                      <el-checkbox-group
                        v-model="shopradio"
                        size="mini"
                        @change="shopchange"
                      >
                        <el-checkbox
                          :label="item"
                          border
                          v-for="item in goodsStatus"
                          :key="item"
                          >{{ item }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </div>
                    <el-collapse-transition>
                      <div
                        v-show="statusshow"
                        style="padding:7px 0 0 0;display:flex"
                      >
                        <el-checkbox-group
                          v-model="shopradio"
                          size="mini"
                          @change="shopchange"
                        >
                          <el-checkbox
                            :label="item"
                            border
                            v-for="item in goodsStatus2"
                            :key="item"
                            >{{ item }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </div>
                    </el-collapse-transition>-->
                    <div class="searchipt">
                      <span>
                        月销量≥
                        <el-input
                          size="mini"
                          v-model.number="searchform.month_goods_num"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>笔
                      </span>
                      <span>
                        佣金比例≥
                        <el-input
                          size="mini"
                          v-model.number="searchform.commission_bl"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>%
                      </span>
                      <span>
                        佣金金额≥
                        <el-input
                          size="mini"
                          v-model.number="searchform.commission"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>
                      </span>
                      <span>
                        单品评分≥
                        <el-input
                          size="mini"
                          v-model.number="searchform.good_review_num"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>
                      </span>
                      <span>
                        券面额≥
                        <el-input
                          size="mini"
                          v-model.number="searchform.coupon_discount"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>
                      </span>
                      <span>
                        折扣≤
                        <el-input
                          size="mini"
                          v-model.number="searchform.discount"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>折
                      </span>
                      <span class="section">
                        卷后价
                        <el-input
                          size="mini"
                          v-model.number="searchform.coupon_after_price_start"
                          placeholder="￥"
                          style="width:45px"></el-input>
                        <i class="el-icon-minus"></i>
                        <el-input
                          size="mini"
                          v-model.number="searchform.coupon_after_price_end"
                          placeholder="￥"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>
                      </span>
                      <span class="section">
                        原价
                        <el-input
                          size="mini"
                          placeholder="￥"
                          v-model.number="searchform.goods_price_start"
                          style="width:45px"></el-input>
                        <i class="el-icon-minus"></i>
                        <el-input
                          size="mini"
                          v-model.number="searchform.goods_price_end"
                          placeholder="￥"
                          style="width:45px"
                          @keyup.enter.native="dosearch"></el-input>
                      </span>
                    </div>
                  </div>
                </div>
                <div>
                  <el-button type="primary" round size="mini" @click="dosearch">搜索</el-button>
                </div>
                <!-- <div class="search_more">
                  <p
                    class="show"
                    v-show="!statusshow"
                    @click="statusshow = true"
                  >
                    展开更多<i class="el-icon-arrow-down"></i>
                  </p>
                  <div class="close" v-show="statusshow">
                    <div @click="statusshow = false">
                      收起<i class="el-icon-arrow-up"></i>
                    </div>
                  </div>
                </div>-->
              </div>
            </div>
          </el-collapse-transition>
        </el-card>
        <div style="margin-top: 20px" class="searchranking">
          <div style="display:flex">
            <el-radio-group v-model="searchform.sort" size="mini" @change="sortchange">
              <el-radio-button label="0">综合</el-radio-button>
              <el-radio-button label="1">近两小时</el-radio-button>
              <el-radio-button label="2">今日销量</el-radio-button>
              <el-radio-button label="3">月销量</el-radio-button>
              <el-radio-button label="4">上架时间</el-radio-button>
              <el-radio-button label="5">优惠卷额</el-radio-button>
              <el-radio-button label="6">佣金比例</el-radio-button>
              <el-radio-button label="7">佣金金额</el-radio-button>
              <el-radio-button label="8">劵后价</el-radio-button>
              <el-radio-button label="9">原价</el-radio-button>
            </el-radio-group>
            <div class="desc">
              <i
                class="el-icon-caret-top"
                :style="{
                  cursor: 'pointer',
                  color: searchform.desc == 2 ? 'blue' : 'gray'
                }"
                @click="dosearch(2)"></i>
              <i
                class="el-icon-caret-bottom"
                :style="{
                  cursor: 'pointer',
                  color: searchform.desc == 1 ? 'blue' : 'gray'
                }"
                @click="dosearch(1)"></i>
            </div>
          </div>
          <div style="display:flex;align-items:center;">
            <span>{{ currentPage }}/{{ max_page }}</span>
            <span class="section" style="float:right">
              <el-pagination
                layout="prev, next"
                small
                :page-size="80"
                :total="count"
                @current-change="handleCurrentChange"
                :current-page="currentPage"></el-pagination>
            </span>
          </div>
        </div>
        <div style="position:relative">
          <div class="goods_box" v-show="goodsloading==false">
            <div class="goods_bot" v-if="botList.length > 0">
              <el-row :gutter="24">
                <el-col :span="18" class="hover_box2" v-for="(item, index) in botList" :key="index">
                  <!-- top标签 -->
                  <!--  <div class="position_Box">
                      <i class="iconfont icon_top topimg"></i>
                      <div class="top_num">{{ index + 1 }}</div>
                  </div>-->
                  <el-card shadow="hover" :body-style="{ padding: '0px' }">
                    <div class="top_main2">
                      <div
                        class="demo-image__lazy"
                        style="cursor: pointer;width:234px;height:240px"
                        @click="godetails(item.id)">
                        <el-image class="elimg2" style="width:234px;height:240px" fit :src="item.goods_img" lazy>
                          <div slot="placeholder" class="image-slot">
                            <Goodsloading></Goodsloading>
                          </div>
                        </el-image>
                      </div>
                      <div class="top_right2">
                        <div class="top_roll2" v-if="searchform.sort == 1">
                          近2小时销量
                          <span style="color:red;font-weight:bold">
                            {{
                              item.goods_today_xl
                            }}
                          </span>
                          件
                        </div>
                        <div class="top_roll2" v-else-if="searchform.sort == 3">
                          月销量
                          <span style="color:red;font-weight:bold">
                            {{
                              item.month_goods_num
                            }}
                          </span>
                          件
                        </div>
                        <div class="top_roll2" v-else>
                          今日销量
                          <span style="color:red;font-weight:bold">
                            {{
                              item.today_coupon_num
                            }}
                          </span>
                          件
                        </div>
                        <div class="top_title2">
                          <a
                            :href="item.goods_url"
                            target="_blank"
                            :title="item.goods_short_name"
                            rel="noopener noreferrer">{{ item.goods_short_name }}</a>
                        </div>
                        <div class="top_data2">
                          <div>
                            <p>{{ item.goods_after_price }}</p>
                            <p style="color:#999">卷后价</p>
                          </div>
                          <div>
                            <p>{{ item.commission_bl }}%</p>
                            <p style="color:#999">佣金</p>
                          </div>
                          <div>
                            <p>
                              {{
                                (
                                  item.goods_price *
                                  (item.commission_bl / 100)
                                ).toFixed(2)
                              }}
                            </p>
                            <p style="color:#999">佣金</p>
                          </div>
                        </div>
                        <div class="coupon_Box">
                          <a style="cursor: pointer;" :href="item.coupon_url" target="_blank" rel="noopener noreferrer">
                            <span>劵</span>
                            <em>¥ {{ parseInt(item.coupon_discount) }}</em>
                          </a>
                          <div>
                            月销：
                            <span style="color:red">
                              {{
                                item.month_goods_num
                              }}
                            </span>
                            日销：
                            <span style="color:red">
                              {{
                                item.today_coupon_num
                              }}
                            </span>
                          </div>
                        </div>
                        <!-- <el-progress
                          style="width:200px;margin: 0 auto;"
                          :percentage="
                            parseInt(
                              (
                                (parseInt(item.coupon_lq_num) / item.coupon_all_num) *
                                100
                              ).toFixed(2)
                            )
                          "></el-progress> -->
                      </div>
                      <div class="shops_Box2">
                        <div class="shops_action2">
                          <div class="action_box2">
                            <div class="join_collect2">
                              <el-button class="join_btn12" type="primary" @click="doAddCollection(item.id)">
                                <span>加入收藏</span>
                              </el-button>
                            </div>
                            <div class="copy2">
                              <el-button
                                class="join_btn22"
                                type="primary"
                                @mousedown.native="handleOk2('botli' + index)"
                                @click="handleOk('botli' + index)">
                                <span>复制文案</span>
                              </el-button>
                            </div>
                            <div class="position_hover" :id="'botli' + index">
                              <!-- <el-card
                                  shadow="always"
                                  :body-style="{ padding: '10px' }"
                              >-->
                              <div class="demo-image__lazy">
                                <el-image fit class="elimghover" :src="item.goods_img" @click="godetails(item.id)">
                                  <!-- style="width:80px" -->
                                </el-image>
                              </div>
                              <div>{{ item.goods_short_name }}</div>
                              <div>
                                原价:{{ item.goods_price }}【卷后价:{{
                                  item.goods_after_price
                                }}】
                              </div>
                              <div>领卷:{{ item.coupon_url }}</div>
                              <div>抢购:{{ item.goods_url }}</div>
                              <div>{{ item.goods_copywriting }}</div>
                              <!-- </el-card> -->
                            </div>
                          </div>
                        </div>
                        <div class="shops_info22">
                        
                          <div class="disflex">
                            <span class="childone">原价:</span>
                            <span class="childtwo">
                              <span style="color:red">
                                {{
                                  item.goods_price
                                }}
                              </span>
                            </span>
                          </div>
                          <div class="disflex">
                            <div style="display: flex;justify-content: space-between;align-items: center;">
                              领券量:
                              <span style="color:red;margin-right:8px">{{ item.coupon_lq_num }}</span>
                              优惠卷剩余:
                              <span style="color:red">
                                {{
                                  item.sy_num
                                }}
                              </span>
                            </div>
                          </div>
                          <div class="disflex">
                            <span class="childone">店铺:</span>
                            <span class="childtwo">
                              {{
                                item.shop_name
                              }}
                            </span>
                          </div>
                          <div class="disflex">
                            <span class="childone">放单人:</span>
                            <span class="childtwo">
                              {{
                                item.nickname
                              }}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div v-else class="nogoods">
              <div style="padding-top:230px">
                <h3 style="margin-top: 0;padding-top: 25px;">抱歉，暂时没有找到合适商品</h3>
                <h4 style="margin-top: 0;padding-top: 10px;">我们会努力寻找更多的商品哦~</h4>
              </div>
            </div>
          </div>
          <sloading class="sloading" v-show="goodsloading==true"></sloading>
          <!-- 分页器 -->
          <!-- @size-change="handleSizeChange" -->
          <div style="width:100%;margin:0 auto;" v-if="botList.length > 0">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              background
              :page-size="80"
              :pager-count="11"
              layout="total, prev, pager, next, jumper"
              :total="count"></el-pagination>
          </div>
        </div>
        <div class="sidebar">
          <div class="pagebox">{{ currentPage }}/{{ max_page }}</div>
          <div class="btns">
            <p @click="gonext(1)">
              向上一页
            </p>
            <p @click="gonext(2)">
              向下一页
            </p>
            <p>
              <router-link to="/help">
                帮助中心
              </router-link>
            </p>
            <p>
              建议反馈
            </p>
            <p>
              <a href="tencent://message/?Site=dounm.com&uin=756589657&Menu=yes" target="_blank" rel="noopener noreferrer">联系客服</a> 
            </p>
            <p>
              一键复制
            </p>
          </div>
          <backtop
            transitionName="fade"
            :customStyle="backtopStyle" 
            :visibilityHeight="0" 
            :backPosition="0"
          ></backtop>
        </div>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
  //import { getSelectedList } from "@/api/homepage";
  import Goodsloading from '@/components/Goodsloading.vue'
  import footerbox from '@/components/footerbox.vue'
  import sloading from '@/components/sloading.vue'
  import backtop from '@/components/backtop'
  import {
    getClassList,
    getBrandList,
    getGoodsList
  } from '@/api/allgoods'
  import {
    doAddCollection
  } from '@/api/homepage'
  export default {
    name: 'Allgoods',
    components: {
      Goodsloading,
      sloading,
      footerbox,
      backtop
    },
    data() {
      return {
        searchloading:false,
        goodsloading:false,
         backtopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      },
        searchshow: true,
        numshow: true,
        currentPage: 1,
        max_page: 0,
        count: 0,
        statusshow: false,
        tags: [],
        botList: [],
        rightList: [],
        swiperOptions: {
          // observer: true,
          direction: 'vertical',
          observeParents: true,
          spaceBetween: 10,
          slidesPerColumn: 2, //显示2行
          slidesPerView: 1, //一行显示1个
          navigation: {
            nextEl: '.swiper-button-nexts',
            prevEl: '.swiper-button-prevs'
          }
        },
        imgsList: [
          // [
          //   {
          //     id: 15,
          //     goods_img:
          //       "http://img.haodanku.com/1593608048_2a0e44f4ebaa20bc3131c3d6d7a1300d",
          //     user_id: 1,
          //     num: "65464",
          //     brand_name: "海尔（Haier）" //品牌名称
          //   }
          // ]
        ],
        ishow: true,
        classList: [
          // {
          //   id: 11,
          //   class_name: "dd "
          // }
        ],
        classradio: '-1',
        shopradio: [],
        goodsStatus: [
          '今日上新',
          '预告单',
          '高评分',
          '聚划算 ',
          '淘抢购',
          '多素材',
          '偏远地区包邮',
          '定向',
          '新品首推'
        ],
        goodsStatus2: ['历史新低', '快抢', '营销返利', '定金预售'],
        searchform: {
          page: 1,
          pagesize: 80,
          brand_id: '', //品牌ID
          goods_class_id: '', //分类ID
          goods_type: '', //店铺类型
          month_goods_num: '', //月销量>
          commission_bl: '', //佣金比例>
          commission: '', //佣金金额>
          good_review_num: '', //单品评分>
          coupon_discount: '', //券面额≥
          discount: '', //折扣≥
          coupon_after_price_start: '', //卷后价起始
          coupon_after_price_end: '', //卷后价结束
          goods_price_start: '', //原价开始
          goods_price_end: '', //原价结束
          sort: '', //1 近2小时销量，2全天销量 ，3月销量，4上架时间，5优惠券面额，6佣金比例，7佣金金额，8券后价，9原价
          desc: 2, //排序  1降序 2升序
          search: '' //搜索字段
        },
        brandname: '',
        classname: '',
        sortname: ''
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    created() {
      if (this.$route.query) {
        // console.log('query', this.$route.query.class)
        this.searchform.goods_class_id =
          parseInt(this.$route.query.class) > 0 ?
          parseInt(this.$route.query.class) :
          ''
        this.classradio = parseInt(this.$route.query.class)
        this.classname = this.$route.query.name
      }
      if (this.$ls.get('search')) {
        // console.log(this.$ls.get('search'))
        this.searchform.search = this.$ls.get('search')
      }
      this.getClassList()
      this.getBrandList()
      this.getGoodsList()
    },
    mounted() {},
    methods: {
       ismyriad(val) {
      const str = '' + val
      if (str.length > 4) {
        return str.substring(0, str.length - 4) + '万+'
      } else {
        return val
      }
    },
      gonext(val){
        if(val===1){
          if(this.currentPage!==1){
            this.searchform.page=this.currentPage-1
            this.getGoodsList() 
          }else{
            this.$message.info('当前已经是第一页了!')
          }
        }
        if(val===2){
          if(this.currentPage!==this.max_page&&this.currentPage<this.max_page){
            this.searchform.page=parseInt(this.currentPage+1)
            this.getGoodsList()
          }else{
            this.$message.info('当前已经是最后页了!')
          }
        }
      },
      //收藏
      doAddCollection(id) {
        doAddCollection({
            collection_id: id
          })
          .then(res => {
            if (res.code == 200) {
              // console.log("收藏返回", res);
              this.$message.success('收藏成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleOk2(val) {
        this.$nextTick(function () {
          //nextTick,当前dom渲染完毕的回调
          const selection = window.getSelection()
          const range = document.createRange()
          // console.log(document.getElementById(val));
          range.selectNode(document.getElementById(val)) //传入dom
          selection.addRange(range)
          document.execCommand('copy')
          selection.removeAllRanges()
        })
      },
      handleOk(val) {
        // console.log(val)
        this.$nextTick(function () {
          //nextTick,当前dom渲染完毕的回调
          const selection = window.getSelection()
          const range = document.createRange()
          // console.log(document.getElementById(val))
          range.selectNode(document.getElementById(val)) //传入dom
          selection.addRange(range)
          document.execCommand('copy')
          this.$message.success('复制成功')
          selection.removeAllRanges()
        })
      },
      search(e) {
        // console.log('e', e)
        this.searchform.search = e.search
        this.getGoodsList()
      },
      godetails(id) {
        // console.log(id)
        const routes = this.$router.resolve({
          path: '/jdselectgoods/goodsdetails',
          query: {
            id: id
          }
        })
        window.open(routes.href, '_blank')
      },
      doclear() {
        this.searchform = this.$options.data().searchform
        this.shopradio = []
        this.brandname = ''
        this.classname = ''
        this.sortname = ''
        this.$parent.searchipt = ''
        this.$ls.remove('search')
      },
      dosearch(val) {
        if (val === 1) {
          this.searchform.desc = 1
        }
        if (val === 2) {
          this.searchform.desc = 2
        }
        this.getGoodsList()
      },
      sortchange(val) {
        // console.log(val)
        switch (parseInt(val)) {
          case 0:
            this.sortname = '综合'
            break
          case 1:
            this.sortname = '近2小时销量'
            break
          case 2:
            this.sortname = '全天销量'
            break
          case 3:
            this.sortname = '月销量'
            break
          case 4:
            this.sortname = '上架时间'
            break
          case 5:
            this.sortname = '优惠券面额'
            break
          case 6:
            this.sortname = '佣金比例'
            break
          case 7:
            this.sortname = '佣金金额'
            break
          case 8:
            this.sortname = '券后价'
            break
          case 9:
            this.sortname = '原价'
            break
        }
        this.getGoodsList()
      },
      changeBrand(val) {
        // console.log('brand_id', val)
        this.brandname = val.brand_name
        this.searchform.brand_id = val.brand_id
        this.getGoodsList()
      },
      //获取商品列表
      getGoodsList() {
        this.goodsloading=true
        getGoodsList(this.searchform)
          .then(res => {
            if (res.code == 200) {
              // console.log('商品返回', res)
              this.count = res.data.count
              this.max_page = res.data.max_page
              this.botList = res.data.data
              // console.log('this.botList', this.botList)
              for(const i in  this.botList){
                this.botList[i].coupon_lq_num = this.ismyriad(this.botList[i].coupon_lq_num)
              this.botList[i].sy_num= parseInt(this.botList[i].coupon_all_num) - parseInt(this.botList[i].coupon_lq_num)
              this.botList[i].sy_num = this.ismyriad(this.botList[i].sy_num)
              this.botList[i].today_coupon_num = this.ismyriad(this.botList[i].today_coupon_num)
              this.botList[i].month_goods_num = this.ismyriad(this.botList[i].month_goods_num)
              this.botList[i].goods_today_xl = this.ismyriad(this.botList[i].goods_today_xl)
              this.botList[i].yesterday = this.ismyriad(this.botList[i].yesterday)
              }
              this.goodsloading=false
              // console.log(this.botList.length);
              // this.getSelectedList(1, 1, this.botList.length / 4);
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      //获取品牌
      getBrandList() {
        this.searchloading=true
        getBrandList({
            page: 1,
            pagesize: 99999
          })
          .then(res => {
            if (res.code == 200) {
              // console.log('品牌返回', res)
              this.imgsList = []
              let num = 0
              this.imgsList[num] = []
              for (const i in res.data.data) {
                if (i == 11) {
                  num++
                  this.imgsList[num] = []
                }
                if (i == 11 + 14 * num) {
                  num++
                  this.imgsList[num] = []
                }
                if (i < 11) {
                  this.imgsList[num].push(res.data.data[i])
                } else {
                  // console.log("num", num);
                  // console.log("i", i);
                  if (i < 11 + 14 * num) {
                    // this.imgsList[num] = [];
                    // console.log(this.imgsList[num]);
                    this.imgsList[num].push(res.data.data[i])
                  } 
                }
              }
              // console.log('imgs', this.imgsList)
               this.searchloading=false
            } else {
              this.$message.info(res.msg)
               this.searchloading=false
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.currentPage = val
        this.searchform.page = val
        this.getGoodsList()
      },
      //获取商品列表
      /*  getSelectedList(type, page, pagesize) {
        getSelectedList({
          type: type,
          page: page,
          pagesize: pagesize
        })
          .then(res => {
            if (res.code == 200) {
              console.log("返回", res);
              if (res.code == 200) {
                // this.rightList = res.data.data.data;
              }
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }, */
      closetags(val) {
        console.log(val)
        switch (val) {
          case 'brand':
            this.searchform.brand_id = ''
            this.brandname = ''
            break
          case 'search':
            this.searchform.search = ''
            this.$parent.searchipt = ''
            this.$ls.remove('search')
            break
          case 'class':
            this.searchform.goods_class_id = ''
            this.classradio = '-1'
            break
          case 'month_num':
            this.searchform.month_goods_num = ''
            break
          case 'commission_bl':
            this.searchform.commission_bl = ''
            break
          case 'commission':
            this.searchform.commission = ''
            break
          case 'review_num':
            this.searchform.good_review_num = ''
            break
          case 'coupon_discount':
            this.searchform.coupon_discount = ''
            break
          case 'discount':
            this.searchform.discount = ''
            break
          case 'after_price':
            this.searchform.coupon_after_price_start = ''
            this.searchform.coupon_after_price_end = ''
            break
          case 'goods_price':
            this.searchform.goods_price_start = ''
            this.searchform.goods_price_end = ''
            break
          case 'sort':
            this.searchform.sort = ''
            break
          case 'desc':
            this.searchform.desc = ''
            break
        }

        for (const i in this.shopradio) {
          if (this.shopradio[i] === val) {
            const index = this.shopradio.indexOf(val)
            this.shopradio.splice(index, 1)
          }
        }
        let shop = ''
        for (const i in this.shopradio) {
          if (this.shopradio[i] === '自营店铺') {
            shop += '1,'
          }
          if (this.shopradio[i] === 'POP店铺') {
            shop += '2,'
          }
          if (this.shopradio[i] === '第三方') {
            shop += '3,'
          }
        }
        this.searchform.goods_type = shop.substr(0, shop.length - 1)
        console.log(this.shopradio)
      },
      shopchange() {
        // console.log('shopradio', this.shopradio)
        let shop = ''
        for (const i in this.shopradio) {
          if (this.shopradio[i] === '自营店铺') {
            shop += '1,'
          }
          if (this.shopradio[i] === 'POP店铺') {
            shop += '2,'
          }
          if (this.shopradio[i] === '第三方') {
            shop += '3,'
          }
        }
        this.searchform.goods_type = shop.substr(0, shop.length - 1)
        // console.log("shop", this.searchform.goods_type);
        this.getGoodsList()
      },
      classchange(val) {
        // console.log('classradio', val)
        for (const i in this.classList) {
          if (this.classList[i].id === val) {
            this.classname = this.classList[i].class_name
          }
        }
        if (val === '-1') {
          this.searchform.goods_class_id = ''
        } else {
          this.searchform.goods_class_id = val
        }
        this.getGoodsList()
      },
      //获取分类
      getClassList() {
        getClassList()
          //   {
          //   page: 1,
          //   pagesize: 999999
          // }
          .then(res => {
            if (res.code == 200) {
              // console.log('分类返回', res)
              this.classList = res.data
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .allgoods {
    font-size: 12px;
    //background-color: #f7fafe;

    .allgoods_main {
      width: 1280px;
      margin: 0 auto;

      .goods_top {
        margin-top: 10px;

        /deep/.el-divider--horizontal {
          margin: 2px 0;
        }

        .choosed {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0;

          .tags_box {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            /deep/.el-tag {
              margin: 5px;
            }

            /deep/.el-icon-delete {
              padding-left: 10px;
              cursor: pointer;
              font-size: 20px;
            }

            .el-icon-delete:hover {
              color: #007aff;
            }
          }
        }

        .search_box {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .search_text {
            width: 50px;
            margin-right: 40px;
            text-align: center;
          }

          .search_main {
            .swiper_box::v-deep {
              width: 1030px;

              .team_left {
                display: flex;

                /deep/.el-radio-group {
                  height: 50px;
                }
              }

              /deep/.brand {
                position: relative;
                padding: 0;
                margin: 0;
                height: 100% !important;

                // margin-right: 9px;
                .el-radio__input {
                  display: none;
                }

                .el-radio__label {
                  display: inline-block;
                  padding-left: 0px;
                }

                .userimg {
                  width: 60px;
                  height: 48px;
                  border-radius: 5px;
                  object-fit: contain;
                }

                .shade {
                  position: absolute;
                  top: 0;
                  display: none;
                  width: 60px;
                  height: 48px;
                  line-height: 48px;
                  border-radius: 3px;
                  font-size: 12px;
                  background-color: #00000087;
                  color: white;
                  cursor: pointer;
                  word-wrap: break-word;
                  white-space: normal;
                }

                .topthree {
                  position: relative;
                  display: flex;
                  width: 125px;
                  height: 50px;
                  margin-right: 1px;

                  .left_box {
                    display: flex;
                    // align-items: center;

                    .img2 {
                      height: 48px;
                    }

                    .right_num {
                      width: 65px;
                      height: 48px;
                      background-color: #f3f3f8;
                      border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                    }
                  }

                  .right_num {
                    padding: 10px 0;
                    z-index: 2;
                    background-color: #fafafa;

                    em {
                      color: #007aff;
                      font-size: 16px;
                      text-align: left;
                      font-weight: bold;
                    }
                  }

                  .right_box {
                    position: absolute;
                    display: none;
                    cursor: pointer;
                    height: 50px;
                    margin-top: -1px;

                    .right_info {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;

                      .num_info {
                        display: flex;
                        width: 130px;
                        height: 50px;
                        overflow: hidden;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                        border: 1px solid gray;
                        background-color: #fafafa;
                        z-index: 3;

                        .right_num {
                          width: 65px;

                          em {
                            margin-top: 10px;
                          }
                        }
                      }
                    }

                    .shade {
                      position: inherit;
                      height: 50px;
                      line-height: 50px;
                      border-top-right-radius: 0;
                      border-bottom-right-radius: 0;
                    }
                  }
                }

                // .topother {
                //   border: 1px solid #000;
                //   border-radius: 8px;
                // }

                .topthree:hover {
                  .right_box {
                    display: block;
                  }
                }
              }

              .brand:hover {
                .shade {
                  display: block;
                }
              }

              .swiper-container {
                //   padding: 5px;
                height: 106px;
              }

              .swiper-slide {
                height: 46px !important;
                margin-left: 0 !important;
              }
            }

            .classradio::v-deep {
              .el-radio__label {
                font-size: 12px;
              }

              .el-radio__input {
                display: none;
              }

              .el-radio {
                padding: 5px;
                border: 1px solid #dfdfdfb3;
                border-radius: 8px;
                margin-right: 13px;
              }

              .el-radio:hover {
                border: 1px solid #007aff;
              }

              .el-radio__label {
                padding: 8px;
              }

              .is-checked {
                border: 1px solid #007aff;
              }
            }

            .shopcheckbox::v-deep {
              .el-checkbox-group {

                // .is-checked {
                // border: none;
                // }
                .el-checkbox {
                  position: relative;

                  .el-checkbox__input {
                    position: absolute;
                    right: 0;
                    bottom: -2px;
                  }

                  .el-checkbox__label {
                    padding-left: 3px;
                  }
                }
              }

              .searchipt {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 8px;

                span {
                  padding: 5px 10px;
                }

                .el-input__inner {
                  padding: 0 3px;
                  height: 25px;
                }
              }
            }
          }

          .search_more {
            border: 1px solid #dddddd;
            border-radius: 5px;
            overflow: hidden;

            .show {
              text-align: center;
              cursor: pointer;
              width: 110px;
              height: 48px;
              line-height: 48px;
              background: rgba(247, 247, 247, 1);
            }

            .close {
              text-align: center;
              cursor: pointer;
              width: 110px;
              padding-top: 10px;
              background: rgba(247, 247, 247, 1);
              background: rgba(247, 247, 247, 1);
              padding-bottom: 18px;
              border-radius: 3px;
            }

            .swiper_btn {
              margin-top: 5px;
              text-align: center;

              .swiper-button-disabled {
                color: #5c5c5c !important;
                border-color: #5c5c5c;
              }

              .swiper-button-prevs {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                height: 20px;
                box-sizing: border-box;
                z-index: 2;
                cursor: pointer;
                font-size: 18px;
                color: #5c5c5c;
                border: 1px solid #5c5c5c;
                border-radius: 5px;
                margin: 5px auto;

                .el-icon-arrow-left {
                  font-weight: 600;
                }
              }

              .swiper-button-nexts {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                height: 20px;
                color: #5c5c5c;
                border: 1px solid #5c5c5c;
                box-sizing: border-box;
                z-index: 2;
                cursor: pointer;
                font-size: 18px;
                border-radius: 5px;
                margin: 0 auto;

                .el-icon-arrow-right {
                  font-weight: 600;
                }
              }

              .swiper-button-prevs:hover {
                color: #007aff;
                border: 1px solid #007aff;
              }

              .swiper-button-nexts:hover {
                color: #007aff;
                border: 1px solid #007aff;
              }

              .swiper-button-prevs:focus {
                outline: black;
              }

              .swiper-button-nexts:focus {
                outline: black;
              }

              .swiper-button-prevs::after {
                content: "";
              }

              .swiper-button-nexts::after {
                content: "";
              }
            }
          }
        }

        .searchranking::v-deep {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0 20px 0;

          .section {
            display: inline-block;
            height: 28px;
            line-height: 26px;
            margin-left: 10px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            padding: 0 10px;
            background-color: #fff;
            border-radius: 5px;

            .el-input__inner {
              padding: 0 3px;
              height: 22px;
            }
          }

          .desc {
            font-size: 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 8px;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            background-color: #fff;
          }
        }

        .goods_box {
          min-height: 500px;
          display: flex;
          justify-content: flex-start;

          .goods_bot {
            position: relative;

            .hover_box2 {
              position: relative;
              width: 260px;
              border-radius: 12px;
              margin-bottom: 20px;
              display: flex;
              display: -webkit-flex;
              flex-direction: row;
              flex-wrap: wrap;

              .topimg2 {
                position: absolute;
                top: -8px;
                left: 20px;
                z-index: 2;
              }

              .top_num2 {
                position: absolute;
                top: 18px;
                left: 43px;
                font-size: 23px;
                color: #ffffff;
                z-index: 3;
              }

              // .elimg2 {
              //   width: 240px;
              //   // height: 240px;
              // }
              .top_main2 {
                background-color: #fff;

                .top_right2 {
                  padding-top: 10px;
                  // width: 240px;
                  font-size: 13px;
                  margin: 0 auto;
                  padding-bottom: 20px;

                  .top_title2 {
                    width: 200px;
                    height: 33px;
                    margin: 3px auto;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-top: 8px;
                    padding-bottom: 8px;
                    font-size: 14px;

                    a {
                      color: #000;
                      // font-size: 14px;
                      text-decoration: none;
                    }

                    a:hover {
                      color: #007aff;
                    }
                  }

                  .top_roll2 {
                    padding-top: 8px;
                    padding-bottom: 8px;
                    width: 150px;
                    // height: 25px;
                    line-height: 25px;
                    border-radius: 8px;
                    margin: 0 auto;
                    background-color: rgba(148, 144, 144, 0.1);

                    span {
                      font-size: 16px;
                      margin-left: 5px;
                      margin-right: 5px;
                      color: #ff4215;
                      font-weight: bold;
                    }
                  }

                  .top_data2 {
                    height: 70px;
                    font-size: 13px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin: 8px 0;
                    p {
                      margin-top: 0 !important;
                      margin-bottom: 0 !important;
                    }

                    p:first-child {
                      color: #333;
                      font-size: 16px;
                      font-weight: bold;
                    }
                  }
                }
              }

              .shops_Box2 {
                .shops_action2 {
                  position: absolute;
                  top: 240px;
                  left: 20px;
                  z-index: -11;
                  transition: all 1s initial;

                  .action_box2 {
                    width: 220px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .join_collect2 {
                      background: linear-gradient(0deg,
                          rgba(89, 158, 253, 0.8),
                          rgba(77, 116, 255, 0.8));
                      font-size: 16px;
                      overflow: hidden;
                      border-top-left-radius: 10px;
                      text-align: center;

                      .join_btn12 {
                        padding: 7px 25px;
                        border: none;
                        margin: 0 auto;
                      }
                    }

                    .join_collect2:hover {
                      opacity: 0.8;

                      span {
                        color: #fff;
                      }
                    }

                    .copy2 {
                      background: linear-gradient(0deg,
                          rgba(89, 158, 253, 0.8),
                          rgba(77, 116, 255, 0.8));
                      font-size: 16px;
                      overflow: hidden;
                      border-top-right-radius: 10px;

                      .join_btn22 {
                        padding: 7px 25px;
                        border: none;
                      }
                    }

                    .position_hover {
                      border-radius: 12px;
                      box-sizing: border-box;
                      padding: 10px;
                      color: white;
                      background-color: #00000075;
                      display: none;
                      position: absolute;
                      top: -100px;
                      left: 225px;
                      width: 300px;
                      text-align: left;
                      // word-break: keep-all;
                      // white-space: nowrap;
                      font-size: 12px;
                      // opacity: 0;
                      z-index: -999;
                      text-align: justify;
                      text-justify: newspaper;
                      word-break: break-all;

                      .elimghover {
                        width: 80px;
                      }
                    }

                    .copy2:hover+.position_hover {
                      display: block;
                      // opacity: 1;
                      z-index: 999;
                    }

                    .copy2:hover {
                      opacity: 0.8;

                      span {
                        color: #fff;
                      }
                    }
                  }
                }

                .shops_info22 {
                  position: absolute;
                  top: 370px;
                  left: 12px;
                  width: 237px;
                  font-size: 12px;
                  background-color: #fff;
                  border-bottom-right-radius: 10px;
                  border-bottom-left-radius: 10px;
                  z-index: -1;
                  border-bottom: 1px solid #ebeef5;
                  border-left: 1px solid #ebeef5;
                  border-right: 1px solid #ebeef5;
                  transition: all 1s initial;
                  padding-bottom: 12px;
                  // display: flex;
                  // align-items: center;

                  div {
                    width: 100%;
                    padding-top: 5px;
                  }
                }
              }
            }

            .hover_box2:hover {
              .shops_Box2 {
                .shops_action2 {
                  transition: all 300ms ease;
                  -moz-transition: all 300ms ease;
                  -webkit-transition: all 300ms ease;
                  top: 213px;
                  // opacity: 1;
                  z-index: 6;
                }

                .shops_info22 {
                  transition: all 300ms ease;
                  -moz-transition: all 300ms ease;
                  -webkit-transition: all 300ms ease;
                  top: 470px;
                  // opacity: 1;
                  z-index: 5;
                }
              }
            }
          }

          .nogoods {
            width: 1200px;
            height: 350px;
            border-radius: 12px;
            // line-height: 200px;
            background: url("~@/assets/imgs/nogoods.png") no-repeat center;
            background-position-y: 20px;
            // background-color: #ecfbf6;
            background-color: #f6f6f6;

            div {
              margin-top: 60px;
            }
          }

          /* 公共样式 */
          // 优惠卷
          .coupon_Box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 25px;
            line-height: 25px;
            margin-bottom: 10px;

            a {
              float: left;
              font-size: 0;
              cursor: pointer;
              margin-top: 1px;

              span {
                display: inline-block;
                padding: 0 3px;
                background: #fd7100;
                color: #fff;
                font-size: 12px;
                background: linear-gradient(0deg,
                    rgba(255, 75, 66, 1),
                    rgba(255, 117, 60, 1));
                height: 20px;
                vertical-align: middle;
                line-height: 20px;
              }

              em {
                display: inline-block;
                padding: 0 2px;
                border: 1px solid #fd7100;
                color: #fd7100;
                font-size: 12px;
                height: 20px;
                vertical-align: middle;
                line-height: 18px;
                padding-left: 5px;
                padding-right: 5px;
              }
            }

            div {
              font-size: 13px;
              color: gray;
            }
          }

          //角标
          .position_Box {
            position: relative;

            .topimg {
              font-size: 44px;
              color: #ff5c40;
              position: absolute;
              top: -5px;
              left: 15px;
              z-index: 2;
            }

            .top_num {
              position: absolute;
              width: 30px;
              top: 16px;
              left: 22px;
              font-size: 18px;
              color: #ffffff;
              z-index: 3;
              text-align: center;
            }
          }

          .disflex {
            display: flex !important;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 10px;
            text-align: left;

            .childone {
              display: inline-block;
              margin-right: 8px;
              // width: 150px !important;
            }

            .childtwo {
              text-align: right;
              white-space: nowrap;
            }
          }
        }

        .sidebar {
          position: fixed;
          top: 50%;
          right: 20px;
          // border: 1px solid #E7E7E7;
          margin: 10px 0;
          width: 50px;
          border-radius: 3px;
          box-shadow: 0 0 6px #eee;
          .pagebox{
            width: 100%;
            color: #4d75ff;
            font-size: 14px;
            // padding-bottom: 6px;
            text-align: center;
            background-color: #F6F6F6;
          }
          .btns{
            display:flex;
            flex-wrap:wrap;
            background-color: #fff;
          }
          /deep/.el-icon-download{
            transform: rotate(180deg);
            border: 1px solid #E7E7E7;
            display: block;
            width: 50px;
            height: 43px;
            line-height: 40px;
            background: #fff;
            border-radius: 3px;
            font-size: 26px;
            font-weight: bold;
            color: #4d75ff;
            cursor: pointer;
            margin-top: 10  px;
            // box-shadow: 0 0 12px #eee;
          }
          p {
            display: block;
            width: 100%;
            font-size: 12px;
            color: #666;
            border-top: 1px solid #E7E7E7;
            padding: 6px 6px;
            letter-spacing: 2px;
            text-align: center;
            cursor: pointer;
          }
          p:hover{
            color: #4d75ff;
          }
        }
      }
    }
  }
</style>